import React, { Component } from 'react'
import './index.css'

export default class Header extends Component {
    render() {
        return (
            <div className='todo-header'>
                <input type="text" onKeyUp={this.addTodo} placeholder='请输入你的任务名称，按回车键确认' />
            </div>
        )
    }


    addTodo = (e) => {
        //接受父组件传递的函数，用来修改父组件的state状态
        const { addTodo } = this.props;
        //event对象上有一个keyCode属性代表键盘的键码 回车的键码是13
        if (e.keyCode !== 13) return;
        //当发布的时候，输入的内容不能为空 或者去掉空格后不能为空
        if (e.target.value.trim() === '') return;

        console.log(e.target.value);

        //拼接一个对象传递给父组件，父组件交给state保管
        const nowTodo = {
            id: Date.now(),
            content: e.target.value,
            done: false
        }

        //调用父组件的函数，并传入新的todo信息
        addTodo(nowTodo);

        //当发布完成之后，清空输入框的值
        e.target.value = '';

    }

}
